<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      center: [113.813778,22.775249],
      zoom: 18.2,
      mapOption:  {
        hideWithoutStyle:false,//是否隐藏设定区域外的楼块
        areas:[{ //围栏1
          //visible:false,//是否可见
          rejectTexture:true,//是否屏蔽自定义地图的纹理
          color1: 'rgba(255,255,0,0.3)',//楼顶颜色
          color2: 'rgb(255,255,0)',//楼面颜色
          path: [[113.813468,22.772804],[113.810531,22.775455],[113.812179,22.776665],[113.813508,22.775652],[113.814886,22.777114],[113.816932,22.776277],[113.817056,22.7756],[113.816624,22.774887]]
        }]
      }
    }
  },
  name: "map-view",
  mounted() {
    this.setCenterAndArea()
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    setCenterAndArea: function () {
      const loginUser = this.$loginSession();
      if (loginUser.institutes && loginUser.institutes.length > 0) {
        const institute = loginUser.institutes[0];
        if (institute.location) {
          console.log('当前页面地图：' + JSON.stringify(institute))
          this.setLocation(institute.location)
        }
      }else if (loginUser.buildings && loginUser.buildings.length > 0) {
        const building = loginUser.buildings[0];
        console.log('当前页面地图：' + JSON.stringify(building))
        if (building.location) {
          this.setLocation(building.location)
        }
      }else if (loginUser.departments && loginUser.departments.length > 0) {
        const department = loginUser.departments[0];
        console.log('当前页面地图：' + JSON.stringify(department))
        if (department.location) {
          this.setLocation(department.location)
        }
      }
    },
    setLocation: function (location) {
      if (location.lng && location.lat) {
        this.center = [location.lng, location.lat]
        if (location.zoom) {
          this.zoom = location.zoom
        }
      }
      if (location.area && location.area.indexOf(';') > 0 && location.area.indexOf(',') > 0) {
        const pointArr = location.area.split(';');
        const arr = []
        pointArr.forEach(function (point) {
          if (point.indexOf(',') > 0) {
            arr.push([point.split(',')[0], point.split(',')[1]])
          }
        })
        this.mapOption.areas[0].path = arr
      }
    },
    setDevice(AMap) {
      // 以 icon URL 的形式创建一个途经点
      var viaMarker = new AMap.Marker({
        position: new AMap.LngLat(113.813368,22.772804),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
        offset: new AMap.Pixel(-13, -30)
      });

      // 将 markers 添加到地图
      this.map.add([viaMarker]);
    },
    setBuildingArea(AMap) {
      const buildingLayer = new AMap.Buildings({zIndex: 130, zooms: [16, 20]});
      buildingLayer.setStyle(this.mapOption); //此配色优先级高于自定义mapStyle
      return buildingLayer;
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "81e4e1670dbfedf9aae96db38a432f7b",
      };
      AMapLoader.load({
        key: "1cfc6308190df66631827aa53b629e06",
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.Buildings", "AMap.Marker"],
      })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              zoom:this.zoom,
              pitch:50,
              showBuildingBlock: true,
              showIndoorMap:false,
              showLabel:true,
              mapStyle:'amap://styles/darkblue',
              center:this.center,
              features:['bg','point','road'],
              viewMode:'3D',
              terrain: true,
              layers:[
                AMap.createDefaultLayer(),
                this.setBuildingArea(AMap),
              ]
            });
            this.setDevice(AMap);
          })
          .catch((e) => {
            console.log(e);
          });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
